<template>
    <BasicTable @register="registerTable" :rowSelection="rowSelection" >
        <template #tableTitle>
            <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">新增</a-button>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
            <TableAction divider :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
        </template>
    </BasicTable>
    <CustomModal ref="modelRef" :title="isUpdate ? '编辑' : '新增'" :isUpdate="isUpdate" :detail="currentDetail" @success="handleSuccess"/>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useTable, BasicTable } from '@/components/Table';
import { useListPage } from '@/hooks/system/useListPage';
import { list, remove } from './demand.api';
import { searchFormSchema, columns } from './demand.data';
import CustomModal from './components/modal.vue';
import { useMessage } from '@/hooks/web/useMessage';

const modelRef = ref(null);
const isUpdate = ref(false);
const currentDetail = ref({});
const { createMessage } = useMessage();

// 行选择配置
const rowSelection = {
    type: 'checkbox',
};

const { prefixCls, tableContext, onExportXls, onImportXls, refreshTable } = useListPage({
    tableProps: {
        title: '需求单',
        api: list,
        columns,
        canResize: false,
        immediate: true,
        formConfig: {
            //labelWidth: 120,
            schemas: searchFormSchema,
            autoSubmitOnEnter: true,
            showAdvancedButton: true,
            fieldMapToNumber: [
            ],
            fieldMapToTime: [
            ],
        },
        actionColumn: {
            // width: 120,
            // fixed:'right'
        },
        beforeFetch: (params) => {
            return params;
        },
    },
});

const [registerTable] = tableContext;

// 刷新表格数据
const refreshData = () => {
    refreshTable && refreshTable();
};

// 处理新增
const handleAdd = () => {
    isUpdate.value = false;
    currentDetail.value = {};
    modelRef.value?.openModal();
};

// 处理编辑
const handleEdit = (record) => {
    isUpdate.value = true;
    currentDetail.value = { ...record };
    modelRef.value?.openModal();
};

// 处理删除
const handleDelete = async (record) => {
    try {
        const result = await remove({ id: record.id });
        if (result.success) {
            createMessage.success('删除成功');
            refreshData();
        } else {
            createMessage.error(result.message || '删除失败');
        }
    } catch (error) {
        console.error('删除失败:', error);
        createMessage.error('删除失败');
    }
};

// 处理详情查看
const handleDetail = (record) => {
    // 可以打开详情模态框或跳转到详情页面
    // 这里简单实现为打开编辑模态框但禁用编辑
    isUpdate.value = true;
    currentDetail.value = { ...record };
    // 可以添加详情模式的标识
    modelRef.value?.openModal();
};

// 处理表单提交成功后的回调
const handleSuccess = () => {
    createMessage.success(isUpdate.value ? '编辑成功' : '新增成功');
    refreshData();
};

/*
 * 操作栏
 */ 
function getTableAction(record) {
    return [
        {
            label: '编辑',
            onClick: handleEdit.bind(null, record),
            color: 'success',
            disabled: false,
            useConfirmButton: false,
            auth: 'demand:cgcj_demand_plan:edit',
        }
    ]
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
    return [
        {
            label: '详情',
            onClick: handleDetail.bind(null, record),
            color: 'info',
            type: 'link',
            size: 'small',
            useConfirmButton: false,
        }, {
            label: '删除',
            popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
                placement: 'topLeft'
            },
            type: 'link',
            size: 'small',
            color: 'error',
            useConfirmButton: true,
            auth: 'demand:cgcj_demand_plan:delete'
        }
    ]
}
</script>
<style scoped lang="less"></style>
